<template>
	<div>
		<el-table :data="dirGuideTable" border style="width: 100%">
			<el-table-column prop="guideStepName" label="步骤" width="180" />
			<el-table-column prop="guideStepOperate" label="操作" width="180" />
			<el-table-column prop="guideStepExample" label="示例">
				<template #default="{row}">
					<span class="commond-lines">{{row.guideStepExample}}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script lang="ts" setup>
import { ref, toRefs } from 'vue';
import { DirTableRow } from '../index.vue';

export interface DirGuideItem{
	guideStepName: string,
	guideStepOperate: string,
  guideStepExample: string
}

const props = defineProps<{
	selectRow: DirTableRow | null | undefined,
}>();

const { selectRow } = toRefs(props);

const dirGuideTable = ref<DirGuideItem[]>([]);
dirGuideTable.value = [
	{
		guideStepName: '创建目录',
		guideStepOperate: '在客户机创建目录(可根据实际需求创建)',
		guideStepExample: `mkdir /mnt/${selectRow.value?.storageDirName}`
	},
	{
		guideStepName: '存储目录挂载',
		guideStepOperate: '在客户机挂载存储目录',
		guideStepExample: `mount -t ceph ${selectRow.value?.storageDirMonAddrs}:${selectRow.value?.storageDirPath} /mnt/${selectRow.value?.storageDirName} -o name=${selectRow.value?.storageDirAuthId},secret=${selectRow.value?.storageDirAuthKey}`
	}
];
</script>